<template>
  <div class="mh1">
    <div class="mh2">
      <el-table
        :data="tableData"
        background-color="cornsilk"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        stripe
      >
        <el-table-column prop="mname" label="电影名称" width="145px"> </el-table-column>
        <el-table-column prop="buyTime" label="购票时间" width="255px" sortable> </el-table-column>
        <el-table-column prop="price" label="价格(Y)" width="110px">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #default>
                <p>购票价格：{{ scope.row.price }}元，欢迎下次光临！</p>
              </template>
              <template #reference>
                <el-tag size="medium" type="warning">{{ scope.row.price }}元</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="100px">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #default>
                <p>购票状态：{{ scope.row.ostate }}，请及时前往观影！</p></template
              >
              <template #reference>
                <div class="name-wrapper">
                  <el-tag size="medium" type="success" v-if="scope.row.ostate === '未过期'">{{
                    scope.row.ostate
                  }}</el-tag>
                  <el-tag size="medium" type="danger" v-else>{{ scope.row.ostate }}</el-tag>
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="zw" label="座位" width="100px">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #default>
                <p>购票座位：{{ scope.row.orow }}排{{ scope.row.ocolumn }}列，感谢观影！</p>
              </template>
              <template #reference>
                <div class="name-wrapper">
                  <el-tag size="medium" type="primary"
                    >{{ scope.row.orow }}排{{ scope.row.ocolumn }}列</el-tag
                  >
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="218px">
          <template #default="scope">
            <el-button type="success" @click="comments(scope.row.mname)">佳片评价</el-button>
            <el-button type="danger" @click="drop(scope.row.oid, scope.row.ostate)"
              >取消订单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 100px; margin-left: 20%; float: bottom">
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage5"
          :page-sizes="[5]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import router from '@/router'
const tableData = ref([])
const tableAll = ref([])
const userUid = ref()
const total = ref(0)
const currentPage5 = ref(1)
onMounted(() => {
  userUid.value = JSON.parse(sessionStorage.getItem('uid'))
  axios.get('api/order/getOrderHistory/' + userUid.value).then((res) => {
    console.log('History：')
    console.log(res.data)
    tableAll.value = res.data
    total.value = tableAll.value.length
    const len = tableAll.value.length > 5 ? 5 : tableAll.value.length
    for (let i = 0; i < len; i = i + 1) {
      tableData.value.push(tableAll.value[i])
    }
  })
})
const handleCurrentChange = (val) => {
  tableData.value = []
  currentPage5.value = val
  const index = (val - 1) * 5
  const len = total.value - index > 5 ? 5 : total.value - index

  for (let i = 0; i < len; i = i + 1) {
    tableData.value.push(tableAll.value[index + i])
  }
}
const comments = (mname) => {
  sessionStorage.setItem('movieInfo', JSON.stringify(mname))
  router.push('/movieInfo')
}
const drop = (oid, state) => {
  if (state === '未过期') {
    axios.get('api/order/deleteOrder/' + oid).then((res) => {
      if (res.data === '订单删除成功！') {
        alert('订单取消成功1')
        router.go(0)
      }
    })
  } else {
    alert('该电影已开始放映，无法取消订单！')
  }
}
</script>
<style lang="scss" scoped>
.mh1 {
  width: 96%;
  height: 300px;
  margin-left: 17px;
  margin-top: 30px;
}
.mh2 {
  width: 100%;
  height: 200px;
}
</style>
